<template>
    <!-- 页面标题 -->
  <div class="consumption-records-container">
    <!-- 搜索栏 -->
    <div class="search-card">
      <el-form :inline="true" :model="searchForm" class="search-form">
        <el-form-item label="会员姓名">
          <el-input v-model="searchForm.memberName" placeholder="请输入会员姓名" clearable style="width: 160px" />
        </el-form-item>
        <el-form-item label="手机号">
          <el-input v-model="searchForm.phone" placeholder="请输入手机号" clearable style="width: 160px" />
        </el-form-item>
        <el-form-item label="消费项目">
          <el-select v-model="searchForm.projectType" placeholder="全部项目" clearable style="width: 140px">
            <el-option label="全部项目" value="" />
            <el-option label="理发" :value="1" />
            <el-option label="烫染" :value="2" />
            <el-option label="护理" :value="3" />
            <el-option label="产品" :value="4" />
          </el-select>
        </el-form-item>
        <el-form-item label="时间范围">
          <el-date-picker
            v-model="dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
            style="width: 240px"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch" :icon="Search">搜索</el-button>
          <el-button @click="handleReset" :icon="Refresh">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 数据表格 -->
    <div class="table-card">
      <el-table
        :data="tableData"
        v-loading="loading"
        border
        style="width: 100%"
        :header-cell-style="{ color: '#606266', fontWeight: 'bold' }"
      >
        <el-table-column prop="orderNo" label="消费单号" min-width="160" show-overflow-tooltip />
        <el-table-column prop="memberName" label="会员姓名" min-width="100" />
        <el-table-column prop="phone" label="手机号" min-width="120" />
        <el-table-column prop="projectName" label="消费项目" min-width="100">
          <template #default="scope">
            <el-tag :type="getProjectTypeTag(scope.row.projectType, scope.row.projectName)" size="small">
              {{ scope.row.projectName || '未知项目' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="consumptionAmount" label="消费金额" min-width="100" align="right">
          <template #default="scope">
            <span style="color: #f56c6c; font-weight: bold;">¥{{ scope.row.consumptionAmount?.toFixed(2) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="finalAmount" label="实付金额" min-width="100" align="right">
          <template #default="scope">
            <span style="color: #e6a23c; font-weight: bold;">¥{{ scope.row.finalAmount?.toFixed(2) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="discountRate" label="折扣率" min-width="80" align="center">
          <template #default="scope">
            {{ (scope.row.discountRate * 100).toFixed(1) }}%
          </template>
        </el-table-column>
        <el-table-column prop="balanceBefore" label="消费前余额" min-width="100" align="right">
          <template #default="scope">
            ¥{{ scope.row.balanceBefore?.toFixed(2) }}
          </template>
        </el-table-column>
        <el-table-column prop="balanceAfter" label="消费后余额" min-width="100" align="right">
          <template #default="scope">
            <span :style="{ color: scope.row.balanceAfter < 100 ? '#f56c6c' : '#67c23a', fontWeight: 'bold' }">
              ¥{{ scope.row.balanceAfter?.toFixed(2) }}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="operatorName" label="操作员" min-width="100" />
        <el-table-column label="消费时间" min-width="160">
          <template #default="scope">
            {{ formatDate(scope.row.consumptionTime)}}
          </template>
        </el-table-column>
        <el-table-column prop="remark" label="备注" min-width="120" show-overflow-tooltip />
      </el-table>

      <!-- 分页 -->
      <div class="pagination-container">
        <el-pagination
          v-model:current-page="page"
          v-model:page-size="pageSize"
          :page-sizes="[10, 20, 50, 100]"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { Search, Refresh } from '@element-plus/icons-vue'
import { getMemberConsumptionList } from '@/api/hairmember/members'
import { formatDate } from '@/utils/format'

// 搜索表单
const searchForm = reactive({
  memberName: '',
  phone: '',
  projectType: '',
  startDate: '',
  endDate: ''
})

// 日期范围
const dateRange = ref([])

// 表格数据
const tableData = ref([])
const loading = ref(false)
const total = ref(0)
const page = ref(1)
const pageSize = ref(10)

// 获取项目类型标签样式
const getProjectTypeTag = (type, name) => {
  if (name === '') {
    return 'error'
  }
  const typeMap = {
    1: 'primary',    // 理发
    2: 'warning',    // 烫染
    3: 'success',    // 护理
    4: 'info'        // 产品
  }
  return typeMap[type] || 'info'
}

// 搜索处理
const handleSearch = () => {
  page.value = 1
  loadData()
}

// 重置处理
const handleReset = () => {
  searchForm.memberName = ''
  searchForm.phone = ''
  searchForm.projectType = ''
  searchForm.startDate = ''
  searchForm.endDate = ''
  dateRange.value = []
  handleSearch()
}

// 分页处理
const handleSizeChange = (val) => {
  pageSize.value = val
  loadData()
}

const handleCurrentChange = (val) => {
  page.value = val
  loadData()
}

// 加载数据
const loadData = async () => {
  loading.value = true
  try {
    // 设置日期范围
    if (dateRange.value && dateRange.value.length === 2) {
      searchForm.startDate = dateRange.value[0]
      searchForm.endDate = dateRange.value[1]
    } else {
      searchForm.startDate = ''
      searchForm.endDate = ''
    }

    const params = {
      page: page.value,
      pageSize: pageSize.value,
      ...searchForm
    }

    const res = await getMemberConsumptionList(params)
    if (res.code === 0) {
      tableData.value = res.data.list
      total.value = res.data.total
    } else {
      ElMessage.error(res.msg || '获取数据失败')
    }
  } catch (error) {
    ElMessage.error('获取数据失败: ' + error.message)
  } finally {
    loading.value = false
  }
}

// 生命周期
onMounted(() => {
  loadData()
})
</script>

<style scoped>
.consumption-records-container {
  padding: 20px;
  min-height: calc(100vh - 84px);
}

.page-header {
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 20px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.page-title {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.title-text {
  font-size: 28px;
  font-weight: bold;
  color: white;
  margin: 0;
}

.title-subtitle {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
  margin: 0;
}

.search-card {
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

.search-form {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  align-items: center;
}

.table-card {
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

.pagination-container {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .search-form {
    flex-direction: column;
    align-items: stretch;
  }

  .search-form .el-form-item {
    margin-right: 0 !important;
    width: 100%;
  }

  .page-header {
    padding: 16px;
  }

  .title-text {
    font-size: 24px;
  }
}

/* 表格样式优化 */
:deep(.el-table) {
  border-radius: 8px;
  overflow: hidden;
}

:deep(.el-table__header-wrapper) {
  border-radius: 8px 8px 0 0;
}

:deep(.el-tag) {
  border-radius: 12px;
}
</style>